<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新建测试用例 - 智能测试用例生成系统</title>
    
    <!-- 预加载关键资源 -->
    <link rel="preload" href="{{ url_for('static', filename='css/style.css') }}" as="style">
    <link rel="preload" href="{{ url_for('static', filename='css/new_test_case.css') }}" as="style">
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    
    <!-- CSS资源 -->
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/new_test_case.css') }}" rel="stylesheet">
</head>
<body>
    <!-- 现代化导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-modern fixed-top">
        <div class="container">
            <a class="navbar-brand-modern" href="/">
                <i class="fas fa-code"></i>
                <span>智能测试用例生成系统</span>
            </a>
            
            <div class="navbar-nav-modern">
                <a class="nav-link-modern" href="/">首页</a>
                <a class="nav-link-modern" href="/#analyzer">智能分析</a>
                <a class="nav-link-modern" href="/teacher">测试用例管理</a>
                <a class="nav-link-modern" href="/#statistics">统计信息</a>
            </div>
        </div>
    </nav>

    <!-- 页面头部 -->
    <section class="page-header-section">
        <div class="container">
            <div class="page-header">
                <div class="page-title">
                    <h1>新建测试用例</h1>
                    <p>创建新的测试用例，支持自定义输入输出和测试类型</p>
                </div>
                <div class="page-actions">
                    <button class="btn btn-secondary" onclick="goBack()">
                        <i class="fas fa-arrow-left me-2"></i>返回管理
                    </button>
                    <button class="btn btn-primary" onclick="saveTestCase()">
                        <i class="fas fa-save me-2"></i>保存测试用例
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- 主要内容 -->
    <section class="main-content">
        <div class="container">
            <div class="form-container">
                <form id="newTestCaseForm" class="test-case-form">
                    <!-- 问题信息 -->
                    <div class="form-section">
                        <h3 class="section-title">
                            <i class="fas fa-question-circle me-2"></i>
                            问题信息
                        </h3>
                        <div class="form-group">
                            <label class="form-label" for="problemDescription">问题描述 *</label>
                            <textarea class="form-control" id="problemDescription" name="problem_description" rows="3" required placeholder="描述要解决的编程问题，例如：给定一个整数数组和一个目标值，找出数组中两个数的和等于目标值的索引"></textarea>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="inputFormat">输入格式</label>
                                    <textarea class="form-control" id="inputFormat" name="input_format" rows="2" placeholder="例如：第一行包含两个整数n和target，第二行包含n个整数"></textarea>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="outputFormat">输出格式</label>
                                    <textarea class="form-control" id="outputFormat" name="output_format" rows="2" placeholder="例如：输出两个数的索引，用空格分隔"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 测试用例信息 -->
                    <div class="form-section">
                        <h3 class="section-title">
                            <i class="fas fa-info-circle me-2"></i>
                            测试用例信息
                        </h3>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="testCaseTitle">测试用例标题 *</label>
                                    <input type="text" class="form-control" id="testCaseTitle" name="title" required placeholder="例如：数组排序测试">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="problemType">问题类型 *</label>
                                    <select class="form-control" id="problemType" name="problem_type" required>
                                        <option value="">请选择问题类型</option>
                                        <option value="array">数组操作</option>
                                        <option value="string">字符串处理</option>
                                        <option value="math">数学计算</option>
                                        <option value="sort">排序算法</option>
                                        <option value="search">搜索算法</option>
                                        <option value="tree">树结构</option>
                                        <option value="graph">图算法</option>
                                        <option value="dp">动态规划</option>
                                        <option value="greedy">贪心算法</option>
                                        <option value="other">其他</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label" for="testCaseDescription">测试用例描述</label>
                            <textarea class="form-control" id="testCaseDescription" name="description" rows="2" placeholder="描述这个测试用例的目的和预期行为"></textarea>
                        </div>
                    </div>

                    <!-- 测试配置 -->
                    <div class="form-section">
                        <h3 class="section-title">
                            <i class="fas fa-cogs me-2"></i>
                            测试配置
                        </h3>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="form-label" for="testType">测试类型 *</label>
                                    <select class="form-control" id="testType" name="test_type" required>
                                        <option value="">请选择测试类型</option>
                                        <option value="normal">正常测试</option>
                                        <option value="edge">边界测试</option>
                                        <option value="error">错误测试</option>
                                        <option value="performance">性能测试</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="form-label" for="difficulty">难度等级</label>
                                    <select class="form-control" id="difficulty" name="difficulty">
                                        <option value="easy">简单</option>
                                        <option value="medium" selected>中等</option>
                                        <option value="hard">困难</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="form-label" for="tags">标签</label>
                                    <input type="text" class="form-control" id="tags" name="tags" placeholder="用逗号分隔，如：数组, 排序">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 测试数据 -->
                    <div class="form-section">
                        <h3 class="section-title">
                            <i class="fas fa-database me-2"></i>
                            测试数据
                        </h3>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="inputData">输入数据 (JSON格式) *</label>
                                    <textarea class="form-control json-input" id="inputData" name="input_data" rows="8" required placeholder='例如: {"arr": [1, 2, 3], "target": 5}'></textarea>
                                    <div class="form-text">请输入有效的JSON格式数据</div>
                                    <div class="invalid-feedback" id="inputDataError"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="expectedOutput">期望输出 (JSON格式) *</label>
                                    <textarea class="form-control json-input" id="expectedOutput" name="expected_output" rows="8" required placeholder='例如: {"result": 2, "index": 1}'></textarea>
                                    <div class="form-text">请输入有效的JSON格式数据</div>
                                    <div class="invalid-feedback" id="expectedOutputError"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="form-actions">
                        <button type="button" class="btn btn-secondary" onclick="goBack()">
                            <i class="fas fa-times me-2"></i>取消
                        </button>
                        <button type="button" class="btn btn-primary" onclick="saveTestCase()">
                            <i class="fas fa-save me-2"></i>保存测试用例
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer-modern">
        <div class="container">
            <div class="footer-content">
                <div class="footer-links">
                    <a href="/">首页</a>
                    <a href="/#analyzer">智能分析</a>
                    <a href="/teacher">测试用例管理</a>
                    <span>&copy;智能测试用例生成系统</span>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript资源 -->
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='js/new_test_case.js') }}"></script>
</body>
</html>
